<template>
    <div class="box">
        <rightTitle title="设备检测"></rightTitle>
        <div class="content">
            <div class="rTop">
                <div class="left" id="charLeft"></div>
                <div class="demo-progress" id="charRight">

                </div>

            </div>
            <div class="rBottom">
                <dv-scroll-board :config="config" class="scr" style="width:100%;height:100%;" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import rightTitle from './rightTitle.vue';
import { onMounted, reactive } from 'vue';
import * as echarts from "echarts";
import { get } from '@/request/methods';


const config = reactive({
    header: ['', '设备名称', '设备状态'],
    data: [

    ]
})
get({ url: '/v1.0/api/deviceWorking/equipmentTesting' }).then(res => {
    let data = res.data.data
    // console.log(data);
    data.forEach((v: any) => {
        let val = Object.values(v)
        config.data.push(val as never)
    });

})



onMounted(() => {

    let myChart = echarts.init(document.getElementById("charLeft"));
    let myChartright = echarts.init(document.getElementById("charRight"));
    // console.log(myChartright);

    let angle = 0; //角度，用来做简单的动画效果的
    let value = 100;
    myChart.setOption({
        backgroundColor: '#000E1A',
        title: [{
            text: '',
            x: '50%',
            y: '40%',
            textAlign: 'center',
            textStyle: {
                fontSize: '70',
                fontWeight: '100',
                color: '#79ffff',
                textAlign: 'center',
            },
        },],
        polar: {
            radius: ['85%', '81%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
            startAngle: 0,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
        },
        graphic: {//中间放图片
            elements: [{
                type: 'image',
                z: 3,
                style: {
                    //   image: imgURL,//图片
                    width: 42,
                    height: 50,
                },
                left: 'center',
                top: 'center',
            },],
        },
        series: [
            // 紫色线
            {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                            startAngle: (-90 + angle) * Math.PI / 180,
                            endAngle: (-270 + angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#8383FA",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5", //紫点
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
                    let point = getCirlPoint(x0, y0, r, (90 + angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#8450F9", //绿
                            fill: "#8450F9"
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {//绿色线
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                            startAngle: (-90 + -angle) * Math.PI / 180,
                            endAngle: (90 + -angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {//绿点
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
                    let point = getCirlPoint(x0, y0, r, (270 + -angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#0CD3DB", //绿
                            fill: "#0CD3DB"
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {//最外面圈线
                type: 'pie',
                radius: ['84%', '85%'],
                center: ['50%', '50%'],
                data: [{
                    hoverOffset: 1,
                    value: 100,
                    name: '',
                    itemStyle: {
                        color: '#0FCFED',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                },
                ]
            },
            {   //第二层环
                name: name,
                type: 'pie',
                radius: ['60%', '70%'],
                silent: true,
                clockwise: false,
                startAngle: 0,

                endAngle: 360,

                z: 1,
                zlevel: 0,
                label: {
                    normal: {
                        position: "center",

                    }
                },
                data: [{
                    value: 100,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: 'rgb(105,206,195)',
                        }
                    }
                },

                ]
            },
            {
                name: "刻度间隔",
                z: 2,
                type: "gauge",
                radius: '73.5%',
                center: ['50%', '50%'],
                startAngle: 0,
                endAngle: 360,
                splitNumber: 40,
                hoverAnimation: true,
                axisTick: {
                    show: true,
                    splitNumber: 1,
                    length: '14%',
                    lineStyle: {
                        width: 10,
                        color: 'rgb(4,31,62)'
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0,
                    }
                },
                detail: {
                    show: false
                },
                data: [100]
            },




        ]
    });
    window.onresize = function () {//自适应大小
        myChart.resize();
    };


    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    function getCirlPoint(x0: number, y0: number, r: number, angle: number) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
            x: x1,
            y: y1
        }
    }

    function draw() {
        angle = angle + 3
        // myChart.setOption(option, true)               打开就报错   
        //  window.requestAnimationFrame(draw);
    }

    setInterval(function () {
        //用setInterval做动画感觉有问题
        draw()
    }, 100);


    let chartData = [
        {
            name: '',
            value: 245,
        },
        {
            name: '',
            value: 211,
        },
    ]

    myChartright.setOption({
        xAxis: {
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitArea: { show: false },
            axisLine: {
                show: false,
            },
        },
        grid: {
            top: 0,
            bottom: 0,
            left: '5%',
        },
        yAxis: {
            inverse: true,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    padding: [-15, 0, 35, 18],
                },
                formatter(value: string, index: number) {
                    let str = '', num = 'TOP' + (index + 1)
                    if (index === 0) {
                        str = '{a|    正常设备}{title| ' + "" + '}'
                    } else if (index === 1) {
                        str = '{b|    异常设备}{title| ' + value + '}'
                    } else if (index === 2) {
                        str = '{c| ' + num + '}{title| ' + value + '}'
                    } else {
                        str = '{d| ' + num + '}{title| ' + value + '}'
                    }
                    return str
                },
                rich: {
                    a: {
                        borderColor: '#EE6F7C',
                        borderWidth: 1,
                        borderRadius: [0, 10, 10, 0],
                        padding: [3.5, 10, 1, -13],
                        backgroundColor: 'rgba(238, 111, 124, 0.8)',
                    },
                    b: {
                        borderColor: '#FFCF5F',
                        borderWidth: 1,
                        borderRadius: [0, 10, 10, 0],
                        padding: [3.5, 10, 1, -13],
                        backgroundColor: 'rgba(255, 207, 95, 0.7)',
                    },
                    c: {
                        borderColor: '#00E8FF',
                        borderWidth: 1,
                        borderRadius: [0, 10, 10, 0],
                        padding: [3.5, 10, 1, -13],
                        backgroundColor: 'rgba(0, 232, 255, 0.7)',
                    },
                    d: {
                        borderColor: '#1A90FF',
                        borderWidth: 1,
                        borderRadius: [0, 10, 10, 0],
                        padding: [3.5, 10, 1, -13],
                        backgroundColor: 'rgba(26, 144, 255, 0.7)',
                    },
                    title: {
                        padding: [0, 0, 0, 3],
                    },
                },
                align: 'left',
            },
            data: chartData.map((item) => item.name),
        },
        series: [
            {
                type: 'pictorialBar',
                symbol: 'rect',
                symbolRotate: 30,
                symbolRepeat: 'fixed',
                symbolClip: true,
                symbolOffset: [0, -1.5],
                symbolSize: [2, 12],
                symbolMargin: '3',
                itemStyle: {
                    normal: {
                        color: '#000726',
                    },
                },
                label: {
                    show: true,
                    color: '#fff',
                    fontFamily: 'Bebas',
                    fontSize: 12,
                    offset: [-9, -1.5],
                    position: 'right',
                    formatter(params: { dataIndex: any; value: string; }) {
                        let result = ''
                        switch (params.dataIndex) {
                            case 0:
                                result = '{img|}{index0|' + params.value + '}{unit|件}'
                                break
                            case 1:
                                result = '{img|}{index1|' + params.value + '}{unit|件}'
                                break
                            case 2:
                                result = '{img|}{index2|' + params.value + '}{unit|件}'
                                break
                            default:
                                result = '{img|}{index3|' + params.value + '}{unit|件}'
                                break
                        }
                        return result
                    },
                    rich: {
                        img: {
                            height: 18,
                            width: 20,
                            // backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
                        },
                        unit: {
                            color: '#fff',
                            fontSize: 11,
                        },
                        index0: {
                            color: '#ee6f7c',
                            fontFamily: 'Bebas',
                            padding: [-2, 2, 0, 0],
                        },
                        index1: {
                            color: '#ffcf5f',
                            fontFamily: 'Bebas',
                            padding: [-2, 2, 0, 0],
                        },
                        index2: {
                            color: '#00e8ff',
                            fontFamily: 'Bebas',
                            padding: [-2, 2, 0, 0],
                        },
                        index3: {
                            color: '#fff',
                            fontFamily: 'Bebas',
                            padding: [-2, 2, 0, 0],
                        },
                    },
                },
                symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3,
                data: chartData.map((item) => item.value),
                z: 2,
            },
            {
                type: 'bar',
                barWidth: 10,
                data: chartData.map((item) => item.value),
                itemStyle: {
                    normal: {
                        color: '#00F7F0',
                    },
                },
                z: 1,
            },
            {
                type: 'bar',
                barGap: '-125%', // 设置外框粗细
                data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3),
                barWidth: 15,
                itemStyle: {
                    color: 'none',
                    borderColor: 'rgba(64, 245, 245, 0.5)',
                },
                z: 0,
            },
        ],
    });
    window.onresize = function () {//自适应大小
        myChartright.resize();
    };

})



</script>

<style lang="scss" scoped>
.box {
    width: 75%;
    height: 45%;
    margin: 0 auto;

    .content {
        background-color: rgba(255, 255, 255, .1);
        width: 100%;
        margin-top: 10px;
        height: calc(100% - 40px);
        position: relative;

        .rTop {
            width: 100%;
            height: 45%;
            position: relative;
            box-sizing: border-box;

            .left {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 30%;
                height: 80%;
            }

            .demo-progress {
                width: calc(70% - 20px);
                height: 100%;
                position: absolute;
                right: 0;
            }
        }

        .rBottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
        }
    }
}
</style>: any: { getWidth: () => number; getHeight: () => number; }: any: { getWidth: () => number; getHeight: () =>
number; }: any: { getWidth: () => number; getHeight: () => number; }: any: { getWidth: () => number; getHeight: () =>
number; }: number: number: number: number: string: number: { dataIndex: any; value: string; }